<template>
<div class="boot">
  <div class="xiaoshuo" v-for="(item,index) in userstorexiaoshuo.xiaoshuotitle " :key="index" @click="change(index)">
  <div class="left">
    <h1>{{ item.ID }}</h1>
  </div>
  <div class="contain">
   <div class="content">
    <h3 class="contain-top">{{item.articlename}}</h3>
   <div class="shuzhi">{{ item.author }}</div>
   <div class="contain-bo">{{item.intro.substring(0, 6) }}</div>
   </div>
  </div>

  <div class="right">
    <img class="book-cover-img  loaded" :src="item.url_img  
" alt="十日终焉" pskt="1">
  </div>
</div>
 </div>
</template>

<script setup>
 import { userstore } from '@/stores/userstore';
import { useRoute,useRouter } from 'vue-router'
const route = useRoute()
const router=useRouter()
const userstorexiaoshuo=userstore()

userstorexiaoshuo.xiaoshuo()
// const boot= document.querySelectorAll('.boot')
const change=(index)=>{
  // console.log(index);
  router.push(`/search?id=${index+1}`)
}



</script >

<style scoped >
.boot{
  width: 1200px;
  margin: auto;
  margin-top: 30px;
}
  .xiaoshuo{
    display: flex;
    width: 250px;
    height: 105px;
    margin-top: 40px;
  }
  .left{
    width: 20px;
    margin-left: 20px;
    
  }
  .right{
    width: 88px;
    height: 105px;
    object-fit: cover;
    overflow: hidden;

  }
  .right img{
    width: 88px;
    height: 105px;


  }
  .right img:hover{
    transform: scale(1.4);
    transition: 0.5s;
  }
  .contain{
    flex:1
  }
 .shuzhi{
margin-top: 15px;
font-weight:400px
 }
 .contain-bo{
  margin-top: 5px;
 }
  .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 130px;
    height: 105px;

  }
  .boot[data-v-248103db] {
    width: 1200px;
    margin: auto;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

</style>